/*
 * © 2010 Autodata Solutions Company. All Rights Reserved
 * This source code is the confidential and proprietary information of Autodata Solutions Company.
 * The user shall not, in whole or in part, copy, publish, disclose or make any use of this source code
 * without the prior written consent of Autodata Solutions Company.
 */
Ext.ns('net.autodata.modelwalk');
(function () {
	var DQ = Ext.DomQuery;	
	var View = Ext.extend(net.autodata.AbstractView, {

	    templates: undefined,
	    title: 'Select a vehicle from the drop downs below and click continue.',

		constructor: function ()
		{
			View.superclass.ctor.apply(this, arguments);
		},
		
		initTemplates: function ()
		{
			var ts = this.templates || {};
			
			if (!ts.mainTpl) {
				ts.mainTpl = new Ext.XTemplate(
					'<div class="vehicleselector-view {viewCls}" style="{[this.width(values.width)]}{[this.height(values.height)]}">',
						'<h5>' + this.title + '</h5>',
						'<div class="vehicleselector-body">',
							'<table border="0" cellpadding="0" cellspacing="0">',
								'<tr>',
									'<td class="modelwalk">',
										'<div class="modelwalk-wrap"></div>',
										'<div class="continuebtn-wrap"></div>',
									'</td>',
									'<td class="trimimage"><div class="trimimage-wrap"></div></td>',
								'</tr>',
							'</table>',
						'</div>',
					'</div>',
					{
						width: function (w)
						{
							return w ? String.format('width:{0}px;', w) : '';
						},
						
						height: function (h)
						{
							return h ? String.format('height:{0}px;', h) : '';
						},
						compiled: true,
						disableFormats: true
					}
				)
			}
			
			this.templates = ts;
		},
		
		getTemplateArgs: function ()
		{
			var panel = this.component;
			return {
				viewCls: this.cls || '',
				width: panel.width,
				height: panel.height
			};
		},
		
		render: function ()
		{
			var dom = this.component.el.dom;
			this.templates.mainTpl.overwrite(dom, this.getTemplateArgs());
			
			var panel = this.component;
			panel.modelWalk.render(DQ.selectNode('.modelwalk-wrap', dom));
			panel.continueButton.render(DQ.selectNode('.continuebtn-wrap', dom));
			panel.iofImage.render(DQ.selectNode('.trimimage-wrap', dom));
		}
		
	});
	
	net.autodata.modelwalk.VehicleSelectorView = View;
})();
